import React, { memo, useState, useEffect } from 'react';
import { GoodsWrapper } from "./style";
// 组件
import { Table, Switch, Pagination } from 'antd';
import { EyeOutlined,EditOutlined,DeleteOutlined } from '@ant-design/icons';
/* 配置 */
import { contentConfig } from "./config/content";
import { modalConfig } from "./config/modal";
import { getList } from '@/service/product/goods'
const Goods = memo(() => {
  const columns = [
    { title: "商品图片", width: 100,dataIndex: 'img',align: 'center',key: 'img',
        render: row => {
          return <img className='image' src={row} alt=''/>
        },
    },
    { title: "商品名称", width: 100 ,dataIndex: 'name',key: 'name',align: 'center',ellipsis: true,search:'input',},
    { title: "商品标题", width: 80 ,dataIndex: 'title',key: 'title',align: 'center',ellipsis: true},
    { title: "原价格", width: 70 ,dataIndex: 'price',key: 'price',align: 'center',ellipsis: true},
    { title: "现价格", width: 70 ,dataIndex: 'orgPrice',key: 'orgPrice',align: 'center',ellipsis: true},
    { title: "收藏人数", width: 90 ,dataIndex:'cfav',key:'cfav', ellipsis: true },
    { title: "状态", width: 100, dataIndex:'status',align: 'center',key:'status',ellipsis: true,search:'dropdown',
      render: (status,row) => {
        return <Switch checked={status} onClick={e=>statusChange(row)}/>
      },
      filters: [
        {
          text: '全部',
          value: '全部',
        },
        {
          text: '启用',
          value: '1',
        },
        {
          text: '禁用',
          value: '0',
        },
      ],
      // onFilter: (value, record) => record.status.indexOf(value) === 0,
      // filterSearch: true,
    },
    { title: "创建时间",width: 150,dataIndex:'createAt',key:'createAt',ellipsis: true,
      sorter: {compare: (a, b) => a.createAt - b.createAt ? 1 : -1,multiple: 1,}
    },
    { title: "更新时间",width: 150,dataIndex:'updateAt',key:'updateAt',ellipsis: true,
      sorter: {compare: (a, b) => a.updateAt - b.updateAt ? 1 : -1,multiple: 1,}
    },
    { title: "操作", key: 'operate',width: 200, fixed: 'right',align: 'center',icon:<EditOutlined/>,
      render: row => {
        return <div className='table-btn'>
          <span className='detail' onClick={()=>tableBn('detail',row)}><EyeOutlined />详情</span>
          <span className='edit' onClick={()=>tableBn('edit',row)}><EyeOutlined />编辑</span>
          <span className='delete' onClick={()=>tableBn('delete',row)}><DeleteOutlined />删除</span>
        </div>
      },
    },
  ]
  let [tableList,setTableList] = useState([])
  let [total,setTotal] = useState(0)
  let [loading,setLoading] = useState(true)

  const getGoodsList = ()=> {
    getList({pageNum: 1,pageSize: 10}).then(res=>{
      if (res.success) {
        setTableList(res.data)
        setTotal(res.total)
      }
      setTimeout(()=>{
        setLoading(false)
      },500)
      console.log(res,55);
    })
  }
  const tableBn = ()=> {

  }
  const statusChange = ()=>{

  }
  useEffect(()=>{
    getGoodsList()
  },[])// eslint-disable-line
  return (
    <GoodsWrapper>
      {/* <div class="content-bar">
        <span class="content-title">用户管理</span>
      </div> */}
      <div className='user-table'>
        <Table
          loading={loading} 
          dataSource={tableList} 
          rowKey={row => row.id} 
          columns={columns} 
          bordered 
          scroll={{ x: 'calc(50%)', y: 'calc(100vh - 300px)' }}
          pagination={false}
          />
      </div>
      {/* <PageContent contentConfig={contentConfig}/>
      <PageModal modalConfig={modalConfig}/> */}
    </GoodsWrapper>
  );
});

export default Goods;